<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>音乐播放器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="vue.js"></script>
    <link href="music.css" rel="stylesheet">
</head>

<body>
    <!-- 展示页面 -->
    <div id="musicPlay" >
        <!-- 标题和搜索框 -->
        <div class="top">
            <ul class="ul_top">
                <li>
                    <h3>棒棒糖音乐</h3>
                </li>
                <li>
                    <input type="text" placeholder="请输入你想听的！" v-model="musicName" @keyup.enter="selecMusic">
                    <button @click="selecMusic"><span class="glyphicon glyphicon-search"></span></button>
                </li>
            </ul>
        </div>
        <!-- 内容显示 -->
        <div class="mod_info">
            <ul>
                <!-- 歌曲显示 -->
                <li  style="overflow:auto">
                    <ul class="left">
                        <li v-for="(item,index) in musicNameList">
                            <span>{{index+1}}</span>.
                            <a @click="playMusicUrl(item.id)" @play=''>{{item.name}}</a>
                            <a class="glyphicon glyphicon-film" v-show="item.mvid" @click="musicMv(item.mvid)"></a>
                        </li>
                    </ul>
                </li>
                <!-- 封面 -->
                <li class="mod">
                    <img :src="musicImg" alt="没有图片" :class="{rota:musicPlay}">
                </li>
                <!-- 评论 -->
                <li style="overflow:auto;overflow-y: scroll;">
                    <h4>热评！</h4>
                    <ul class="reight">
                        <li  v-for="item in musicHot">
                            <p>
                                <img :src="item.user.avatarUrl" alt="没有头绪">
                                <span>{{item.user.nickname}}</span>
                            </p>
                            <p>{{item.content}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 进度条 -->
        <div class="foot">
            <audio  :src="musicUrl" controls="controls" @play="play" @pause="pause"> 
                Your browser does not support the audio tag.
            </audio>
        </div>
    
    <!-- mv层 -->
    <div class="mv" v-show="musicMvshow" style="display: none;" @keyup.esc="musicdis">
        <video  controls="controls" autoplay="autoplay" :src="musicMvUrl"  >
         </video>
    </div>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="music.js"></script>
</html>